<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="//unpkg.com/vue/dist/vue.js"></script>

    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>

<body>
    <div id="app">
        <template>
            <el-table
              :data="list"
              border
              style="width: 23%">
              <el-table-column
                fixed
                prop="sid"
                label="编号"
                width="120">
              </el-table-column>
              <el-table-column
                prop="sname"
                label="姓名"
                width="120">
              </el-table-column>
              <el-table-column
                prop="age"
                label="年龄"
                width="120">
              </el-table-column>
              <el-table-column
                fixed="right"
                label="操作"
                width="100">
                <template slot-scope="scope">
                  <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
                  <el-button @click="del(scope.row.sid)" type="text" size="small">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </template>
    </div>

    <script>
        let vue = new Vue({
            el: "#app",
            data: {
              list:[
                {sid:1001,sname:"张三1",age:21},
                {sid:1002,sname:"张三2",age:22},
                {sid:1003,sname:"张三3",age:23},
                {sid:1004,sname:"张三4",age:24},
                {sid:1005,sname:"张三5",age:25},
                {sid:1006,sname:"张三6",age:26},
              ]
            },
            methods:{
                handleClick:function(row){
                    alert(row.sname+'   '+row.age)
                },
                del:function(sid){
                    // 箭头函数里面的this还是指的外面的this
                    this.list.forEach((item,i)=>{
                        if(sid==item.sid){
                            this.list.splice(i,1)
                            return false
                        }
                    })
                }
            }
        })
    </script>
</body>

</html>